<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <button onclick="handler()">执行动画</button>
      <span id="a"> 价格：4599 </span>
    </div>
    <script>
      // 封装动画函数 JS 控制
      function animate(delayTime, start, end, callback) {
        const now = Date.now();
        let value = start;
        // 步长
        const speed = (end - start) / delayTime;
        function _run() {
          const time = Date.now() - now;

          value = start + speed * time;

          // 终止逻辑
          if (time >= delayTime) {
            value = end;
            callback && callback(value);
            return;
          }
          callback && callback(value);
          // 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
          requestAnimationFrame(_run);
        }

        _run();
      }

      function handler() {
        animate(1000, 4599, 45999, (value) => {
          const dom = document.getElementById('a');
          dom.textContent = `价格：${value.toFixed(2)}`;
        });
      }
    </script>
  </body>
</html>
